<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>大区销售目标预测</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link rel="stylesheet" href="/dist/plugins/select2/select2.min.css">
    <link rel="stylesheet" href="/dist/plugins/fixedTable/fixed-table.css"/>
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=39cd89cd">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <style>
        .table > tbody > tr > td {
            height: 30px;
            max-height: 44px;
            overflow: hidden;
            padding: 0 2px;
            border: 1px #cbcbcd solid
        }

        .table > thead > tr > th {
            border: 1px #cbcbcd solid
        }

        tbody {
            font-size: 12px;
        }

        .saveModle {
            width: 500px;
            height: 300px;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -250px;
            margin-top: -150px;
            background: #fff;
            border-radius: 10px;
            z-index: 1978;
            display: none;
            border: 1px solid #cfcfcf;
        }

        .saveModle .top {
            height: 34px;
            line-height: 34px;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            padding-left: 7px;
            border-bottom: 1px solid #cfcfcf;
            background: #fff;
        }

        .saveModle .top .title {
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            float: left;
            background: #fff;
        }

        .saveModle .top .btn {
            font-size: 20px;
            width: 34px;
            height: 22px;
            line-height: 12px;
            display: inline-block;
            float: right;
        }

        .saveModle .top .btn:hover {
            color: red;
        }

        .saveModle .saveBtn {
            margin: 0 auto;
            margin-top: 35px;
            display: block;

        }


        .lineOne {
            max-height: 36px;
            line-height: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
        }

        p {
            display: inline-block;
            float: left;
            margin-bottom: 0px;
            line-height: 25px;
            padding-right: 15px;
            color: #228bee;
            font-size: 14px;
        }

        .td-value span.lineOne {
            overflow: hidden;
            text-overflow: ellipsis;
            color: black !important;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            max-height: 48px;
            line-height: 24px;
        }
        .td-value span.lineOne1 {
            overflow: hidden;
            text-overflow: ellipsis;
            color: black !important;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            max-height: 48px;
            line-height: 24px;
        }

        .td-value {
            text-align: left !important;
            vertical-align: middle;
            word-wrap: break-word;
            color: black !important;
        }

        .td-value span {
            display: inline-block;
            overflow: hidden;
            padding-left: 0.06rem;
            word-wrap: break-word;
            color: black !important;
        }

        .fixed-table_body tr td {
            border-right: none;
        }

        .fixed-table_header tr th {
            /*border-right: none;*/
            background: yellow;
            font-weight: normal;
            font-size: 12px;
        }
        .input-sm {
            height: 30px;
            padding: 5px 10px;
            font-size: 12px;
            line-height: 1.5;
         border-radius: 0px;
        }

        .description {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            width: 260px;
            /* margin-left: 395px; */
            /* padding-top: 50px; */
            /* float: right; */
            position: absolute;
            top: -10px;
            right: 0px;
            background: #d3e8fd;
            padding:5px;
            z-index: 1111;
            border:1px solid #cbcbcd;
        }

        .mubiao {
            display: block;
            /* justify-content: flex-start; */
            /* position: absolute; */
            /* top: 60px; */
            /* right: 255px; */
            margin: 15px auto;
            height: 60px;
            width: 350px
        }

        .title {
            background: rgb(211, 232, 253) !important;;
        }

        .lineOne span, .lineSpan {
            max-height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

        .text-center td {
            background: #fff;
        }
        /*获取公司*/
        .oa-tab-com {
            display: -webkit-box;
            -webkit-overflow-scrolling: touch;
            height: 34px;
            line-height: 34px;
            /*background: #2a8cec;*/
            width: 100%;
            padding-left: 5px;
            border-bottom: 1px solid #989898;
            position: absolute;
            top: 10px;
        }

        .tabNoCom {
            text-align: center;
            color: #000;
            font-size: 14px;
            margin-left: 8px;
            margin-right: 8px;
            margin-top: 3px;
            cursor: pointer;
        }

        .tabActiveCom {
            text-align: center;
            color: #fff;
            /*background-image: url(/dist/img/tabApp.png);*/
            margin-left: 8px;
            margin-right: 8px;
            /*background-size: 100% 100%;*/
            padding: 4px 15px 3px 15px;
            /*border: 1px solid #2a8cec;*/
            border-bottom: none;
            background: #228bee;
            z-index: 999;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
        }

        .content {
            padding: 0px 0px 15px 20px;
            padding-bottom: 0;
        }

        #tbList tr td {
            height: 42px !important;
        }

        .fixed-table-box td {
            position: static;
        }

        .fixed-table-box .fixed-table_body td {
            border-left: 1px solid #cbcbcd;
        }

        html, body, #app {
            padding: 0px;
            margin: 0px;
        }

        .fixed-table-box th {
            position: relative;
            text-align: center;
            height: 36px;
            border: 1px solid #cbcbcd;
        }

        .fixed-table-box th {

        }

        .companyMore {
            width: 100%;
            height: 65px;
            position: relative;
            margin-top: 82px;
        }

        .companyOne {
            width: 100%;
            height: 65px;
            position: relative;
            margin-top: 65px;
        }

        .table {
            width: 100%;
            max-width: 100%;
            margin-bottom: 0px;
        }

        .has-feedback .form-control {
            padding-right: 0px;
        }

        .duiqi {
            text-align: justify;
            display: inline-block;
            overflow: hidden;
            vertical-align: middle;
            height: 36px;
            line-height: 24px;
            width: 36px;
        }
        /*获取区域总监*/
        .tabActive {
            text-align: center;
            color: #228bee;
            /*border-bottom: 2px solid #228bee;*/
            margin-left: 8px;
            margin-right: 8px;
            height: 24px;
            line-height: 24px;
        }

        .tabNo {
            text-align: center;
            color: #666666;
            font-size: 12px;
            /*border-bottom: 2px solid #f8f8f8;*/
            margin-left: 8px;
            margin-right: 8px;
            height: 24px;
            line-height: 24px;
        }

        .oa-tab-small {
            display: -webkit-box;
            position: fixed;
            top: 40px;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            height: 30px;
            width: 100%;
            background: #fff;
            z-index: 1111;
            display: flex;
        }
        .wyTd{
            height: 18px !important;
        }
        body{
            overflow-y: hidden;
        }
    </style>
</head>
<body>
<div class="oaLoad">
    <div class="loadGif" id="areaProgress"></div>
</div>
<section class="content " style="padding-left:0px;" id="app" v-cloak>
    <div class="div-td-content-more"><i></i></div>
    <div id="hidden"></div>
    <iframe id="ifExprot" style="width:0px;height:0px;display: none;" frameborder="0"></iframe>
    <!--获取公司-->
    <div class="oa-tab-com" v-if="companyList.length>1" id="hqCompany">
        <div v-for="(item,i) in companyList" class="tabNoCom">
            <span :class="selectIndex==i? 'tabActiveCom':'tabNoCom'" style="height: 30px"
                  @click="getTagByCompanyId(item.id,i);">
                {{item.name}}
            </span>
        </div>
    </div>
    <!--获取区域总监-->
    <div v-if="userInfo.roleName!='区域总监'&&userInfo.roleName!='大区经理'&&managerList.length>=1">
        <div class="oa-tab-small" v-if="companyList.length>1"
             :style="companyList.length>=1?'top:50px;':'top:20px;'" id="hqZJ">
            <!--<div>-->
                <!--<span style="text-align: justify;display: inline-block;overflow: hidden;vertical-align: middle;height: 24px;line-height: 24px;width: 60px;margin-right: 5px;font-size: 14px;">区域总监<i style="display: inline-block;width: 100%;height: 0;"></i></span>：-->
            <!--</div>-->
            <span :class="selectDepart==0? 'tabActive':'tabNo'" style="height: 30px;cursor: pointer;"
                  @click="getZjlSaleTargetYc(companyId,selectIndex,'1');">
                <span class="oa-name" >全部</span>
            </span>
            <span :class="selectDepart==i+1? 'tabActive':'tabNo'" style="height: 30px;cursor: pointer;" v-for="(item,i) in managerList"
                  @click="getListByZj(item.id,i);">
                <span class="oa-name" >{{item.name}}</span>
            </span>
        </div>
        <div class="oa-tab-com" v-else id="hqZJ">
            <div class="tabNoCom">
                <span :class="selectDepart==0?'tabActiveCom':'tabNoCom'" style="height: 30px"
                      @click="getZjlSaleTargetYc(companyId,selectIndex,'1')">
                    全部
                </span>
            </div>
            <div v-for="(item,i) in managerList" class="tabNoCom">
                <span :class="selectDepart==i+1? 'tabActiveCom':'tabNoCom'" style="height: 30px"
                      @click="getListByZj(item.id,i);">
                    {{item.name}}
                </span>
            </div>
        </div>
    </div>
    <!--获取大区-->
    <div class="oa-tab-com" v-if="userInfo.roleName=='区域总监'" style="top: 0px;" id="hqDQ">
        <div class="tabNoCom">
            <span :class="selectRegion==0? 'tabActiveCom':'tabNoCom'" style="height: 30px;cursor: pointer;"
                  @click="getZjlSaleTargetYc(companyId,selectIndex,'1');">
                全&nbsp;&nbsp;部
            </span>
        </div>
        <div v-for="departItem in regionList" class="tabNoCom">
            <span :class="selectRegion==departItem.bigManagerRegionName? 'tabActiveCom':'tabNoCom'" style="height: 30px;cursor: pointer;" v-if="isContainsThree(departItem.bigManagerRegionName)"
                  @click="setBigRegionNames(departItem.bigManagerRegionName,departItem.bigManagerRegionId)">
                {{departItem.bigManagerRegionName}}
            </span>
        </div>
    </div>
    <!--沃源公司获取大区-->
    <div v-if="userInfo.roleName!='区域总监'&&userInfo.roleName!='大区经理'">
        <div class="oa-tab-small" v-if="companyList.length>1||managerList.length>=1" :style="companyList.length>=2?'top:75px;':'top:15px;'" id="hqDQ" style="display: -webkit-box;">
            <!--<div>-->
                <!--<span style="text-align: justify;display: inline-block;overflow: hidden;vertical-align: middle;height: 24px;line-height: 24px;width: 60px;margin-right: 5px;font-size: 14px;">大区<i style="display: inline-block;width: 100%;height: 0;"></i></span>：-->
            <!--</div>-->
            <div :class="selectRegion==0? 'tabActive':'tabNo'"
                 style="cursor: pointer"
                 @click="getListByZj(managerId,selectDepart-1,0);">
                <span class="oa-name">全部</span>
            </div>
            <div v-for="departItem in regionList" :class="selectRegion==departItem.bigManagerRegionName? 'tabActive':'tabNo'"
                 style="cursor: pointer"
                 v-if="isContainsThree(departItem.bigManagerRegionName)"
                 @click="setBigRegionNames(departItem.bigManagerRegionName,departItem.bigManagerRegionId)">
                {{departItem.bigManagerRegionName}}
            </div>
        </div>
        <div class="oa-tab-com" style="top: 0px;" id="hqDQ" v-else>
            <div class="tabNoCom">
            <span :class="selectRegion==0? 'tabActiveCom':'tabNoCom'" style="height: 30px;cursor: pointer;"
                  @click="getZjlSaleTargetYc(companyId,selectIndex,'1');">
                全&nbsp;&nbsp;部
            </span>
            </div>
            <div v-for="departItem in regionList" class="tabNoCom">
            <span :class="selectRegion==departItem.bigManagerRegionName? 'tabActiveCom':'tabNoCom'" style="height: 30px;cursor: pointer;" v-if="isContainsThree(departItem.bigManagerRegionName)"
                  @click="setBigRegionNames(departItem.bigManagerRegionName,departItem.bigManagerRegionId)">
                {{departItem.bigManagerRegionName}}
            </span>
            </div>
        </div>
    </div>
    <div id="targetHeight" style="position: relative;">
        <div class="nav-tabs-custom oaReportNav" style="margin:10px 0px;">
            <div class="pull-left" style="margin-top: 15px">
                <select id="testState" v-model="buyDateYc" class="form-control"
                        style="height:26px;width: 130px;font-size:12px;line-height:25px;padding-top:0px;padding-bottom:0px;padding-left:6px;">
                    <!--@change="search()"-->
                    <option selected value="">请选择购买时间</option>
                    <option selected value="本月内">本月内</option>
                    <option selected value="下月内">下月内</option>
                </select>
            </div>
            <div class="has-feedback">
                <input type="text" id="likeSelect" class="form-controll pull-left input-sm"
                       style="width: 130px;height: 25px;margin-left: 5px;margin-top: 15px" v-model="keyYc"
                       placeholder="请输入关键字"
                       size="12">
                <span id="btnQuery" class="glyphicon glyphicon-search form-control-feedback"
                      style="display:none "></span>
                <input type="button" class="btn oaBtn pull-left btn-sm" style="margin-left: 10px;margin-top: 15px;min-width: 60px;"
                       value="查询"
                       class="oaBtn" @click="getZjlSaleTargetYc(companyId,selectIndex)">
            </div>

        </div>
        <div class="mubiao" v-if="loginType=='ggxq'">
            <table class="table table-hover text-center table-striped" style="width: 150px;float: left;">
                <thead>
                <tr>
                    <th style="width: 75px;" class="title">当月目标</th>
                    <th class="title">已完成</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>{{targetSum}}</td>
                    <td>{{finishSum}}</td>
                </tr>
                </tbody>
            </table>
            <table class="table table-hover text-center table-striped" style="width: 110px;border-left: none;">
                <thead>
                <tr>
                    <!--<th style="width: 75px;border-left: none;" class="title">成交总概率</th>-->
                    <th class="title" style="border-left: none;">超75%成交总概率</th>
                    <!--<th style="width: 80px;" class="title">目标完成比对</th>-->
                </tr>
                </thead>
                <tbody>
                <tr>
                    <!--<td style="color: red;border-left: none;">{{scale(allChance,targetSum,finishSum)}}%</td>-->
                    <td style="color: red;border-left: none;">{{scale(overSevenChance,targetSum,finishSum)}}%</td>
                    <!--<td style="color: red;">{{scale()}}%</td>-->
                </tr>
                </tbody>
            </table>
        </div>
        <!--沃源目标-->
        <div class="mubiao" v-else style="width: 400px;">
            <table class="table table-hover text-center table-striped">
                <thead>
                <tr>
                    <th class="title">设备类型</th>
                    <th class="title">当月目标</th>
                    <th class="title">已完成</th>
                    <!--<th class="title">成交总概率</th>-->
                    <th class="title" style="width: 110px;">超75%成交总概率</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td class="wyTd" style="background: #F8F8F8;">中大挖</td>
                    <td class="wyTd">{{wyTarget.bigTargetNum}}</td>
                    <td class="wyTd">{{wyTarget.bigFinishNum}}</td>
                    <!--<td class="wyTd" style="color: red;">{{scale(bigChance,wyTarget.bigTargetNum,wyTarget.bigFinishNum)}}%</td>-->
                    <td class="wyTd" style="color: red;">{{scale(bigOverSevenChance,wyTarget.bigTargetNum,wyTarget.bigFinishNum)}}%</td>
                </tr>
                <tr>
                    <td class="wyTd" style="background: #F8F8F8;">小挖</td>
                    <td class="wyTd">{{wyTarget.smallTargetNum}}</td>
                    <td class="wyTd">{{wyTarget.smallFinishNum}}</td>
                    <!--<td class="wyTd" style="color: red;">{{scale(smallChance,wyTarget.smallTargetNum,wyTarget.smallFinishNum)}}%</td>-->
                    <td class="wyTd" style="color: red;">{{scale(smallOverSevenChance,wyTarget.smallTargetNum,wyTarget.smallFinishNum)}}%</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="description" style="position: absolute;top: -9px;">
            <span style="color: red;font-size: 15px">成交概率说明</span>
            <span>100%:已发车在途，信审通过待发车等情况</span>
            <span>75%:认可设备，但时间不确定或资金未到</span>
            <span>50%:有竞争对手、工程未确定、合伙人未定等</span>
        </div>
    </div>
    <div class="box-body no-padding" style="overflow: auto;margin-top: 3px;" id="scrollDiv">
        <div id="progress" class="wyui-progress"></div>
        <div class="fixed-table-box head-fixed ">
            <!-- 表头 start -->
            <div class="fixed-table_header-wraper">
                <table class="fixed-table_header" cellspacing="0" cellpadding="0" border="0">
                    <thead>
                    <tr>
                        <th style="width: 30px">
                            序号
                        </th>
                        <th style="width: 55px">
                            大区
                        </th>
                        <th style="width: 46px">
                            大区<br>经理
                        </th>
                        <th style="width: 80px">
                            区域
                        </th>
                        <th style="width:46px">
                            跟踪人
                        </th>
                        <th style="width: 46px">
                            客户<br>姓名
                        </th>
                        <th style="width: 75px">
                            意向<br>机型
                        </th>
                        <th style="width: 50px">
                            购买<br>时间
                        </th>
                        <th style="width: 60px">
                            预计成交<br>时间
                        </th>
                        <th style="width: 50px;">
                            成交<br>概率
                        </th>
                        <th style="width: 50px;">
                            心里价格<br>(万)
                        </th>
                        <th style="width: 30px;">
                            是否<br>置换
                        </th>
                        <th style="width: 75px;">
                            置换品牌<br>机型
                        </th>
                        <th style="width: 50px;">
                            评估价<br>(万)
                        </th>
                        <th style="width: 60px;">
                            付款<br>方式
                        </th>
                        <th style="width: 50px;">
                            首付<br>比例
                        </th>
                        <th style="width: 50px;">
                            定金金额<br>(万)
                        </th>
                        <th style="min-width: 200px;">
                            最新跟踪情况
                        </th>
                        <th style="width: 60px;border-right: none">
                            更新状态
                        </th>
                        <th style="width: 17px"></th>
                    </tr>
                    </thead>
                </table>
            </div>
            <!--内容-->
            <div id="divMain" class="fixed-table_body-wraper iframeXSYC">
                <table cellspacing="0" cellpadding="0" border="0"
                       style="width: 100%;border-top-width:0px;" id="tableMain">
                    <tbody id="tbList">
                    <tr v-for="(item,i) in list" v-if="isContains(item.bigManagerRegionName)">
                        <td style="width: 30px;text-align: center;">
                            <div class="table-cell">{{i+1}}</div>
                        </td>
                        <td style="width: 55px;text-align: center;" v-if="item.bigManagerRegionName.indexOf('大客户部')<0"
                            :rowspan="item.bigManagerRegionNamespan"
                            :class="{hidden: item.bigManagerRegionNamedis}">
                            {{item.bigManagerRegionName.substring(0,item.bigManagerRegionName.length-2)}}<br>大区
                        </td>
                        <td style="width: 55px;text-align: center;" v-else
                            :rowspan="item.bigManagerRegionNamespan"
                            :class="{hidden: item.bigManagerRegionNamedis}">
                            {{item.bigManagerRegionName}}
                        </td>
                        <td style="width: 46px;text-align: center;"
                            :rowspan="item.bigManagerNamespan"
                            :class="{hidden: item.bigManagerNamedis}">
                            <div class="table-cell">
                                <span class="duiqi">
                                                {{item.bigManagerName}}<i
                                        style="display: inline-block;width: 100%;height: 0;"></i>
                                            </span></div>
                        </td>
                        <td style="width: 80px;text-align: center;"
                            :rowspan="item.managerRegionNamespan"
                            :class="{hidden: item.managerRegionNamedis}">
                            <div class="table-cell" style="height: 36px">
                                <span class="lineOne" style="text-align: left;" :style="item.managerRegionName.length>6?'':'line-height:36px'">{{item.managerRegionName}}</span>
                            </div>
                        </td>
                        <td style="width: 46px;text-align: center;" v-if="item.managerName==''&&item.customerName!=''"
                            :rowspan="item.managerRegionNamespan"
                            :class="{hidden: item.managerRegionNamedis}">
                            <div class="table-cell">
                                <span class="duiqi">
                                                {{item.genZR}}<i
                                        style="display: inline-block;width: 100%;height: 0;"></i>
                                            </span>
                            </div>
                        </td>
                        <td style="width: 46px;text-align: center;" v-else
                            :rowspan="item.managerRegionNamespan"
                            :class="{hidden: item.managerRegionNamedis}">
                            <div class="table-cell">
                                <span class="duiqi">
                                                {{item.managerName}}<i
                                        style="display: inline-block;width: 100%;height: 0;"></i>
                                            </span>
                            </div>
                        </td>
                        <td style="width: 46px;text-align: center;">
                            <div class="table-cell">
                                <span @click="openDetail(item,0)" class="duiqi" v-if="item.customerName!=''"
                                      style="color: rgb(42, 140, 236);cursor:pointer;">
                                                {{item.customerName.substring(0,3)}}<i
                                        style="display: inline-block;width: 100%;height: 0;"></i>
                                            </span></div>
                        </td>
                        <td style="width: 75px;text-align: center;" class="td-value">
                            <div class="table-cell"><span class="lineOne">{{item.intentionModel}}</span></div>
                        </td>
                        <td style="width: 50px;text-align: center;" class="td-value">
                            <div class="table-cell"><span class="lineOne1">{{item.buyDate}}</span></div>
                        </td>
                        <td style="width: 60px;text-align: center;" class="td-value">
                            <div class="table-cell"><span class="lineOne1">{{item.yjOkDate}}</span></div>
                        </td>
                        <td style="width: 50px;text-align: center;" class="td-value">
                            <div class="table-cell"><span class="lineOne1">{{item.chance}}</span></div>
                        </td>

                        <td style="width: 50px;text-align: center;" class="td-value">
                            <div class="table-cell"><span class="lineOne1">{{item.psychologicalPrice}}</span></div>
                        </td>
                        <td style="width: 30px;text-align: center;" class="td-value">
                            <div class="table-cell"><span class="lineOne1" v-if="item.ifReplace=='1'">是</span>
                                <span class="lineOne1" v-if="item.ifReplace=='0'">否</span></div>
                        </td>
                        <td style="width: 75px;text-align: center;" class="td-value">
                            <div class="table-cell"><span class="lineOne">{{item.replaceType}}</span></div>
                        </td>
                        <td style="width: 50px;text-align: center;" class="td-value">
                            <div class="table-cell"><span class="lineOne1" v-if="item.ifReplace=='1'">{{item.valuationPrice}}</span>
                                <span class="lineOne1" v-else></span></div>
                        </td>
                        <td style="width: 60px;text-align: center;" class="td-value">
                            <div class="table-cell"><span class="lineOne1">{{item.buyType}}</span></div>
                        </td>
                        <td style="width: 50px;text-align: center;" class="td-value">
                            <div class="table-cell">
                                <span class="lineOne1" v-if="item.paymentRatio!=''">{{item.paymentRatio}}%</span>
                                <span class="lineOne1" v-else></span>
                            </div>
                        </td>
                        <td style="width: 50px;text-align: center;" class="td-value">
                            <div class="table-cell"><span class="lineOne1">{{item.earnestMoney}}</span></div>
                        </td>
                        <td style="min-width: 200px;">
                            <div class="table-cell" style="height: 36px;">
                                <span class="lineOne" style="text-align: left">{{item.otherCondition}}</span>
                            </div>
                        </td>
                        <td style="width: 61px;text-align: center;" class="td-value">
                            <div class="table-cell" ><span class="lineOne1" :style="item.state=='已更新'?'color :red !important;':''">{{item.state}}</span></div>
                        </td>

                            <td class="tdMore" style="border-left: 0px;"></td>

                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=54c6b89c"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script src="/dist/plugins/webuploader-0.1.5/webuploader.min.js"></script>
<script src="/dist/plugins/fixedTable/fixed-table.js"></script>
<script>
    $(function () {
        $("body").on("click", ".lineOne,.lineTwo", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + 12 + "px",
                        "left": $(this).offset().left - 6,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
</script>
<script type="text/javascript">
    function refresh() {
        $.wyui.page.getByPage();
    }

    var app = new Vue({
            el: '#app',
            data: {
                selectIndex: 0,
                selectDepart: 0,
                selectRegion: 0,
                allHeightList: 0,
                targetSum: 0,
                finishSum: 0,
                allChance: 0,
                heightNum:0,
                overSevenChance: 0,
                smallChance:0,
                bigChance:0,
                smallOverSevenChance:0,
                bigOverSevenChance:0,
                keyYc: '',
                buyDateYc: '',
                companyId: '',
                managerId: '',
                regionId: '',
                currentUser: getCurrentUser(),
                list: [],
                listChance:[],
                departList: [],
                companyList: [],
                managerList: [],
                regionList: [],
                bigRegionNames: [],
                bigRegionNamesThree: [],

                buyDateObj: {},
                userInfo: {},
                wyTarget:{
                    smallFinishNum:0,
                    smallTargetNum:0,
                    bigFinishNum:0,
                    bigTargetNum:0
                },
                loginType:'ggxq'
            },
            methods: {
                tablesMergeCell: function (list) {
                    for (field in list[0]) {
                        var k = 0;
                        while (k < list.length) {
                            list[k][field + 'span'] = 1;
                            list[k][field + 'dis'] = false;
                            for (var i = k + 1; i <= list.length - 1; i++) {
                                if (list[k][field] == list[i][field] && list[k][field] != '' || list[k][field] == 0 && list[i][field] == 0) {
                                    if (field == 'childRegionName') {
                                        if (list[k].regionName == list[i].regionName) {
                                            list[k][field + 'span']++;
                                            list[k][field + 'dis'] = false;
                                            list[i][field + 'span'] = 1;
                                            list[i][field + 'dis'] = true;
                                        }
                                    } else if (field == 'quyuName') {
                                        if (list[k].regionName == list[i].regionName && list[k].childRegionName == list[i].childRegionName) {
                                            list[k][field + 'span']++;
                                            list[k][field + 'dis'] = false;
                                            list[i][field + 'span'] = 1;
                                            list[i][field + 'dis'] = true;
                                        }
                                    } else {
                                        list[k][field + 'span']++;
                                        list[k][field + 'dis'] = false;
                                        list[i][field + 'span'] = 1;
                                        list[i][field + 'dis'] = true;
                                    }
                                } else {
                                    break;
                                }
                            }
                            k = i;
                        }
                    }
                    return list;
                },
                openDetail: function (item, isAdd) {
                    var that = this;
                    var url = '/page/intentionManagement/quYuIntentionalDetailApp.html?customerId=' + item.customerId + '&isAdd=' + isAdd + '&pageType=edit&userId=' + getCurrentUser().id + '&companyId=' + that.companyId + '&isRegion=1&type=pcbb&yuce=1';
                    var H = $(window).height() - 50;
                    $.dialog({
                        content: 'url:' + url,
                        title: "意向客户详情",
                        width: 500,
                        height: H,
                        max: true,
                        min: true,
                        lock: true
                    });
                },
                isToday: function (item) {
                    var that = this;
                    var item = item;
                    if (!item.customerId || item.customerId == '') {
                        item.state = '';
                    } else {
                        if (item.createTime && item.createTime != '') {
                            if (item.createTime.substring(0, 10) == this.getNowDate()) {
                                item.state = "今日新增"
                            } else {
                                if (item.updateTime && item.updateTime != '' && item.updateTime.substring(0, 10) == this.getNowDate()) {
                                    item.state = '已更新';
                                } else {
                                    item.state = "未更新"
                                }
                            }
                        }
                    }
                },
                getDeviceType:function(item,flag){
                    var that=this;
                    var item =item;
                    console.log(flag)
                        $.ajax({
                            url: server.ip + '/deviceModel/getModelSizeByModelName.json',
                            contentType: 'application/json;charset=utf-8',
                            type: "POST",
                            async: true,
                            data: JSON.stringify({
                                modelName:item.intentionModel
                                }
                            ),
                            error: function () {
                                console.log('error')
                            },
                            success: function (r) {
                                if (r.data.sendData){
                                    var r = r.data.sendData
                                    item.bucketSize = r.bucketSize;
                                }
                                if (flag){
                                    that.getChance();
                                    $(".oaLoad").hide();
                                }
                            },
                        })
                },
                getNowDate: function () {
                    var now = new Date();
                    var year = now.getFullYear();
                    var month = (now.getMonth() + 1).toString();
                    var day = (now.getDate()).toString();
                    var hour = (now.getHours()).toString();
                    var minute = (now.getMinutes()).toString();
                    var second = (now.getSeconds()).toString();
                    if (month.length == 1) {
                        month = "0" + month;
                    }
                    if (day.length == 1) {
                        day = "0" + day;
                    }
                    if (hour.length == 1) {
                        hour = "0" + hour;
                    }
                    if (minute.length == 1) {
                        minute = "0" + minute;
                    }
                    if (second.length == 1) {
                        second = "0" + second;
                    }
                    var dateTime = year + "-" + month + "-" + day;
                    return dateTime;
                },
                getCustomerVisit: function (index) {
                    var that = this;
                    var item = that.list[index];
                    if (!item.customerId || item.customerId == '') {
                        item.todayOtherCondition = '';
                        item.yesterdayOtherCondition = '';
                    } else {
                        $.ajax({
                            url: server.ip + '/depConfig/getCustomerVisit.json',
                            contentType: 'application/json;charset=utf-8',
                            type: "POST",
                            data: JSON.stringify({
                                    createUserId: item.childRegionId,
                                    customerId: item.customerId
                                }
                            ),
                            error: function () {
                                console.log('error')
                            },
                            success: function (r) {
                                var r = r.data.sendData
                                that.list[index].todayOtherCondition = r.result.todayOtherCondition;
                                that.list[index].yesterdayOtherCondition = r.result.yesterdayOtherCondition;
                            },
                        })

                    }
                },
                showBuyDate: function (item) {
                    var that = this;
                    var buyDate = item.buyDate;
                    return that.buyDateObj.get(buyDate);
                },
                scale: function (num,targetSum,finishSum) {
                    var that = this;
                    console.log(num,targetSum,finishSum)
                    if ((Number(targetSum) - Number(finishSum)) == 0) {
                        return 100
                    } else {
                        return Math.abs((Number(num) / (Number(targetSum) - Number(finishSum))).toFixed(2))

                    }
                },
                getListByZj: function (managerId, index,selectRegion) {
                    var that = this;
                    that.selectDepart = index + 1;
                    if (selectRegion){
                        that.selectRegion = selectRegion;
                    } else{
                        that.selectRegion = 0;
                    }
                    if (that.selectDepart == 0){
                        that.getZjlSaleTargetYc(that.companyId,that.selectIndex,'1');
                    } else{
                        that.managerId=managerId
                        var userIds="";
                        var  data={
                            userId: managerId,
                            companyId: that.companyId,
                        }
                        //如果是点击的是销售总监兼职的区域总监，则排除掉其他的区域总监的大区
                        console.log(that.getUserIdInfoById(managerId))
                            if (that.getUserIdInfoById(managerId)){
                                for (var i=0;i<that.managerList.length;i++){
                                    if (that.managerList[i].id!=managerId){
                                        userIds=userIds+","+that.managerList[i].id
                                    }
                                }
                                data={
                                    userId: managerId,
                                    companyId: that.companyId,
                                    userIds:userIds,
                                }
                            }
                        $.ajax({
                            url: server.ip + '/depConfig/getBigRegionByUserId.json',
                            contentType: 'application/json;charset=utf-8',
                            type: "POST",
                            data: JSON.stringify(data),
                            success: function (r) {
                                var r = r.data.sendData.regionList;
                                that.regionList= r;
                                console.log(r)
                                var arrRegionNames = [];
                                var regionIds="";
                                for (var i = 0; i < r.length; i++) {
                                    arrRegionNames.push(r[i].bigManagerRegionName)
                                }
                                that.bigRegionNames = arrRegionNames;
                                that.bigRegionNamesThree = arrRegionNames;
                                for (var i=0;i<r.length;i++){
                                        regionIds=regionIds +","+ r[i].bigManagerRegionId
                                }
                                that.getEveryChance(regionIds);
                            },
                        })
                    }

                },
                getRegionListById:function(userId,companyId){
                    var that=this;
                    var  data={
                        userId: userId,
                        companyId: companyId,
                    }
                    $.ajax({
                        url: server.ip + '/depConfig/getBigRegionByUserId.json',
                        contentType: 'application/json;charset=utf-8',
                        type: "POST",
                        data: JSON.stringify(data),
                        success: function (r) {
                            var r = r.data.sendData.regionList;
                            that.regionList= r;
                        },
                    })
                },
                getUserIdInfoById:function(userId){
                    //判断主职位是否是销售总监
                    var flag=false;
                    $.wyui.postMethod('/user/getUserViewById.json', {id: userId}, function (r) {

                            if (r) {
                                if (r.roleName != '区域总监'){
                                    flag= true;
                                }else{
                                    flag= false;
                                }
                            }else{
                                flag= false;
                            }
                    },true)
                    return flag
                },
                setBigRegionNames:function(regionName,regionId){
                    this.selectRegion=regionName;
                    this.bigRegionNames = [regionName];
                    this.getEveryChance(regionId);
                },
                getHeight:function(){
                    var allHeight=$("#divMain").height()
                    var tableHeight=$("#tableMain").height()
                    var flag= allHeight>=tableHeight?true:false
                    console.log(flag)
                    if (flag){
                        $('.tdMore').each(function(){
                            $(this).css('width','17px');
                    });
                    }else{
                        $('.tdMore').each(function(){
                            $(this).css('width','0px');
                        });
                    }
                },
                isContainsThree: function (regionName) {
                    if(this.bigRegionNamesThree.length == 0) return true;
                    var res = false;
                    for (var i = 0; i < this.bigRegionNamesThree.length; i++) {
                        if (regionName == this.bigRegionNamesThree[i]) {
                            res = true;
                            break;
                        }
                    }
                    return res;
                },
                getZjlSaleTargetYc: function (companyId, i,select) {
                    var that = this;
                    if (select&&select=='1'){
                        that.selectDepart=0;
                        that.selectRegion=0;
                        that.bigRegionNames=[];
                        that.bigRegionNamesThree=[]
                    }
                    if (companyId && companyId != '') {
                        that.companyId = companyId;
                    }
                    if (i && i != '') {
                        that.selectIndex = i;
                    } else {
                        that.selectIndex = 0;
                    }
                    var userId = that.currentUser.id;
                    $(".oaLoad").show();
                    $.ajax({
                        url: server.ip + '/depConfig/getZjlSaleTargetYc.json',
                        contentType: 'application/json;charset=utf-8',
                        type: "POST",
                        data: JSON.stringify({
                            userId: userId,
                            date: that.getNowDate(),
                            companyId: companyId,
                            keyYc: that.keyYc,
                            buyDateYc: that.buyDateYc,
                            regionId: '',
                            managerId: that.managerId
                        }),
                        success: function (r) {
                            var r = r.data.sendData;
                            var flag=false;
                            if (r.result && r.result.length > 0) {
                                for (var i = 0; i < r.result.length; i++) {
                                    that.isToday(r.result[i]);
                                }
                            }
                            that.list = that.tablesMergeCell(r.result);
                            if (that.selectDepart==0&&
                            that.selectRegion==0&&
                            that.bigRegionNames.length==0&&
                            that.bigRegionNamesThree.length==0&&
                                    that.keyYc == ''
                            &&that.buyDateYc==''){
                                that.listChance = that.tablesMergeCell(r.result);
                            }
                            handlerData(r.result)
                            $(".oaLoad").hide();
                            console.log(that.list)
                            if (that.selectRegion != 0) {
                                that.getEveryChance(that.regionId);
                            }else if (that.selectDepart!=0){
                                    that.getListByZj(that.managerId,that.selectDepart-1,that.selectRegion)
                                }  else {
                                    that.getRegionListById(getCurrentUser().id,companyId);
                                    that.getChance();
                                    that.finishSum = r.targetSale.finishSum;
                                    that.targetSum = Number(r.targetSale.saleTargetFinish.saleTargetNum);
                                    that.wyTarget = r.targetSale.saleTargetFinish;
                                    setTimeout(function () {
                                        that.getHeight();
                                    },10)

                                    that.getHeightPC();
                                }

                        },
                    })

                },
                isContains: function (regionName) {
                    if(this.bigRegionNames.length == 0) return true;
                    var res = false;
                    for (var i = 0; i < this.bigRegionNames.length; i++) {
                        if (regionName == this.bigRegionNames[i]) {
                            res = true;
                            break;
                        }
                    }
                    return res;
                },
                //获取区域总监
                getTagByCompanyId: function (companyId, i) {
                    var that = this;
                    that.keyYc="";
                    that.buyDateYc="";
                    that.departList = [];
                    $.wyui.postMethod('/depConfig/getTagByCompanyId.json', {
                        companyId: companyId,
                    }, function (r) {
                        that.managerList = r.managerList;
                        that.managerId='';
                        that.selectDepart=0,
                        that.selectRegion= 0,
                        that.getRegionListById(getCurrentUser().id,companyId);
                        that.getZjlSaleTargetYc(companyId, i,'1');
                    })
                },
                //获取每个大区的概率
                getEveryChance: function (regionId) {
                    var that = this;
                    that.regionId = regionId;
                    that.getTargetAndFinish();
                    setTimeout(function () {
                        that.getHeight();
                    },10)
                },
                //获取大区的目标和完成
                getTargetAndFinish: function () {
                    var that = this;
                    $(".oaLoad").show();
                    $.wyui.postMethod('/depConfig/getTargetAndFinish.json', {
                        userId: that.currentUser.id,
                        date: that.getNowDate(),
                        companyId: that.companyId,
                        regionId: that.regionId,
                    }, function (r) {
                        that.finishSum = r.targetSale.finishSum;
                        that.targetSum = Number(r.targetSale.saleTargetFinish.saleTargetNum);
                        that.wyTarget = r.targetSale.saleTargetFinish;
                        that.getChance();
                    })
                },
                //计算总概率
                getChance:function(){
                    var that=this;
                    var smallChance=0;
                    var bigChance = 0;
                    var smallOverSevenChance = 0 ;
                    var bigOverSevenChance = 0;
                    var allChance = 0;
                    var overSevenChance = 0;
                    for (var i = 0; i < that.listChance.length; i++) {
                        if (that.isContains(that.listChance[i].bigManagerRegionName)) {
                            var chanceNum = that.listChance[i].chance.length - 1;
                            if (that.listChance[i].buyDate == '本月内') {
                                //计算小挖的总概率
                                if (that.listChance[i].chance != '<50%'&&that.listChance[i].bucketSize==0) {
                                    smallChance = smallChance + Number(that.listChance[i].chance.substring(0, chanceNum))
                                }
                                //计算小挖的超过75概率
                                if (Number(that.listChance[i].chance.substring(0, chanceNum)) >= 75&&that.listChance[i].bucketSize==0) {
                                    smallOverSevenChance = smallOverSevenChance + Number(that.listChance[i].chance.substring(0, chanceNum))
                                }
                                //计算大挖的总概率
                                if (that.listChance[i].chance != '<50%'&&that.listChance[i].bucketSize==1) {
                                    bigChance = bigChance + Number(that.listChance[i].chance.substring(0, chanceNum))
                                }
                                //计算大挖的超过75概率
                                if (Number(that.listChance[i].chance.substring(0, chanceNum)) >= 75&&that.listChance[i].bucketSize==1) {
                                    bigOverSevenChance = bigOverSevenChance + Number(that.listChance[i].chance.substring(0, chanceNum))
                                }
                                if (that.listChance[i].chance != '<50%') {
                                    allChance = allChance + Number(that.listChance[i].chance.substring(0, chanceNum))
                                }
                                if (Number(that.listChance[i].chance.substring(0, chanceNum)) >= 75) {
                                    overSevenChance = overSevenChance + Number(that.listChance[i].chance.substring(0, chanceNum))
                                }
                            }
                        }
                    }
                    that.smallChance = smallChance
                    that.bigChance = bigChance;
                    that.smallOverSevenChance = smallOverSevenChance ;
                    that.bigOverSevenChance = bigOverSevenChance;
                    that.allChance = allChance;
                    that.overSevenChance = overSevenChance;
                    $(".oaLoad").hide();
                },
                //计算高度
                getHeightPC: function () {
                    var that = this;
                    var H = $(window).height()
                    var o1 = document.getElementById("hqCompany");
                    var o2 = document.getElementById("hqZJ");
                    var o3 = document.getElementById("hqDQ");
                    var h1 = 0;
                    var h2 = 0;
                    var h3 = 0;
                    if (o1) {
                        h1 = o1.offsetHeight;
                    }
                    if (o2) {
                        h2 = o2.offsetHeight;
                    }
                    if (o3) {
                        h3 = o3.offsetHeight;
                    }
                    that.allHeightList = Number(h1) + Number(h2) + Number(h3);
                    $("#hqZJ").css("top",Number(h1+16)+'px');
                    $("#hqDQ").css("top",Number(h2+h1+16)+'px');
                    document.getElementById("targetHeight").style.marginTop = Number(that.allHeightList+26)+'px';
                    $(".iframeXSYC").height(H - (191+Number(h3)+Number(h2)));
                },
            },
            mounted: function () {
                var that = this;
                document.getElementById("targetHeight").style.marginTop = '114px';
                //滚滚集团的一些人，进来后能看到所有的，将他们的userId转换为曹国玉的userId
                var userIds=['201711271733404C9DA1461F2421F828',
                    '2017121616084F0B9E200AC4144BD435',
                    '2017121616304595BB1D12C91392E04E',
                    '2017121618514C22B68296F31AF8DDE2',
                    '2017121712504FFC81109A91E681B788',
                    '20171217130247059F2B10DB2BE1B5C7',
                    '20190218105344E3AB019AC329256BF9',
                    '2019040810014F6DB3395FF3674DFCE3',
                    '20190418105841A48726641444072F3A',
                    '2017121618514C22B68296F31AF8DDE2',
                    '20181029131941189298E733B95017AF'];
                if ($.inArray(that.currentUser.id,userIds) != -1){
                    that.currentUser.id = '201711271733404C9DA1461F2421F828';
                }
                $.wyui.postMethod('/user/getUserViewById.json', {id: that.currentUser.id,}, function (r) {
                    that.userInfo = r;
                },true)
                if(server.fwq == "wyp"){
                    that.loginType = 'wyp'
                }else{
                    that.loginType = 'ggxq'
                }
                var excludeCompanyIds="201712161613432EAF27DBCCB7D0E6CA,2017121910424ED9AA4F786D5549D72F";
                $.ajax({
                    url: server.ip + '/company/getCompanyListByUserIdAndRegionId.json',
                    contentType: 'application/json;charset=utf-8',
                    type: "POST",
                    data: JSON.stringify({
                        userId: getCurrentUser().id,
                        excludeCompanyIds:excludeCompanyIds
                    }),
                    success: function (r) {
                        var r = r.data.sendData
                        if (r && r.length > 0) {
                            for (var i = 0; i < r.length; i++) {
                                if (r[i].id && r[i].id != '201712161613432EAF27DBCCB7D0E6CA' && r[i].id != '2019011814474FCDB1FC400060A3BEBF') {
                                    that.companyList.push(r[i]);
                                }
                            }
                        }
                        if (that.companyList && that.companyList.length > 0) {
                            var companyId = that.companyList[0].id;
                            that.getTagByCompanyId(companyId,0)
                        }
                    }
                });
                $.wyui.postMethod('/enum2/selectByModuleType.json', {moduleType: 'buyDate'}, function (r) {
                    var list = r;
                    that.buyDateList = r;
                    if (list && list.length > 0) {
                        that.buyDateObj = new Map();
                        for (var i = 0; i < list.length; i++) {
                            var k = list[i].key;
                            var v = list[i].value;

                            that.buyDateObj.set(k, v);
                        }
                    }
                    //that.buyDateObj = r;
                }, true);
            }
        })
    ;
    function refresh() {
        app.getZjlSaleTargetYc(app.companyId,app.selectIndex)
    }
</script>
<script>
    //初始化FixedTable
    $(".fixed-table-box").fixedTable();
    /*    App.blockUI({
            target: '#hidden',
            boxed: true,
            message: '加载中......'//,
            // animate: true
        });
        App.unblockUI('#hidden');*/
</script>
<script>
    function handlerData(list) {
        //处理数据
        //1.筛选出大区list
        var departList = []
        var tempDepartId = ""
        for (var i = 0; i < list.length; i++) {
            var item = list[i]
            if (tempDepartId != item.bigManagerRegionId) {
                var departItem = {
                    bigManagerRegionId: item.bigManagerRegionId,
                    bigManagerRegionName: item.bigManagerRegionName,
                    bigManagerName: item.bigManagerName,
                    bigManagerRegionSortNo: item.bigManagerRegionSortNo,
                    quYuList: [],
                    more: ""
                }
                departList.push(departItem)
                tempDepartId = item.bigManagerRegionId
            }
        }
        //console.log(departList)

        //2.给大区添加区域经理
        for (var i = 0; i < list.length; i++) {
            for (var j = 0; j < departList.length; j++) {
                if (departList[j].bigManagerRegionId == list[i].bigManagerRegionId) {
                    departList[j].quYuList.push(list[i])
                }
            }
        }
        console.log(departList)
        for (var i = 0; i < departList.length; i++) {
            departList[i].quYuList = app.tablesMergeCell(departList[i].quYuList);
        }
        app.departList = app.tablesMergeCell(departList);
    }
</script>
</body>
</html>